<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学员信息</title>
    <link rel="stylesheet" href="res/layui/css/layui.css">
    <link rel="stylesheet" href="css/commons.css">
    <style>
        #search_val {
            text-align: center;
            border-radius: 19px;
        }

        #search_area {
            position: relative;
            top: 15px;
            /* left: -80px; */
        }

        .layui-form-select dl {
            max-height: 200px;
        }

        .layui-table th {
            text-align: center;
        }

        #pagination {
            z-index: 99999;
            position: fixed;
            bottom: 30px;
        }
    </style>
    <script src="res/layui/layui.all.js"></script>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">课工场产融教学新基地</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layadmin-flexible" lay-unselect>
                <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                    <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect>
                <a href="http://www.kgc.cn" target="_blank" title="课工场">
                    <i class="layui-icon layui-icon-website"></i>
                </a>
            </li>
            <li class="layui-nav-item" lay-unselect>
                <a href="javascript:;" layadmin-event="refresh" title="刷新">
                    <i class="layui-icon layui-icon-refresh-3"></i>
                </a>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <span id="operator"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:void(0)" id="showOperator">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:void(0);" id="logoutBtn">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="deptlist" id="deptlist">
                <#if Session.clazzResponseText.code == "200">
                    <#list Session.clazzResponseText.data as clazz >
                        <#if cid == clazz.id>
                            <li class="layui-nav-item layui-this"><a href="/data?cid=${clazz.id}">${clazz.name}</a></li>
                            <#else><li class="layui-nav-item"><a href="/data?cid=${clazz.id}">${clazz.name}</a></li>
                        </#if>
                    </#list>
                    <#else><li> ${Session["clazzResponseText"].msg}</li>
                </#if>
            </ul>
    </div>
</div>

<div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <iframe src="" class="hide" frameborder="0" id="nows" style="width:100%;height: 300px"></iframe>
        <!-- 工具条 -->
            <div class="layui-btn-container" style="margin-bottom: 30px" id="btns">
                <button class="layui-btn layui-btn-sm" id="addBtn" lay-event="add"><i class="layui-icon">&#xe608;</i> 添加</button>
                <button class="layui-btn layui-btn-sm" id="editBtn" lay-event="edit"><i class="layui-icon">&#xe642;</i> 编辑</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" id="delBtn"  lay-event="del"><i class="layui-icon">&#xe640;</i> 删除</button>
                <button class="layui-btn layui-btn-sm" id="infoBtn" lay-event="info"><i class="layui-icon">&#xe609;</i> 详情</button>
                <button class="layui-btn layui-btn-sm" id="echartsBtn" lay-event="echarts"><i class="layui-icon">&#xe6b2;</i> 图示</button>
            </div>
        <form class="layui-form" action="" lay-filter="search" style="margin-bottom: 30px">
            <div class="layui-form-item" id="search_area">
                <div class="layui-input-inline">
                    <select name="cid" id="search_cid">
                        <option value="0">选择班级</option>
                        <#list Session.clazzResponseText.data as clazz >
                            <option value="${clazz.id}">${clazz.name}</option>
                        </#list>
                    </select>
                </div>
                <label class="layui-form-label" style="position: relative;left:50px;z-index:999"><i class="layui-icon layui-icon-username"></i></label>
                <div class="layui-input-inline">
                    <input type="search" id="search_val" name="firstName" autocomplete="off" placeholder="请输入搜索姓名" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="formSearch"><i class="layui-icon">&#xe615;</i>点我一下，你就知道</button>
                </div>
            </div>
        </form>
        <!-- 显示部门内员工简略信息列表 -->
        <table class="layui-table" lay-size="lg">
            <colgroup>
                <col width="30">
                <col width="90">
                <col>
                <col>
                <col>
                <col>
                <col>
                <col>
            </colgroup>
            <thead>
            <tr>
                <th><input type="checkbox" id="isAll"></th>
                <th>序号</th>
                <th>曾用名</th>
                <th>现用名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>出生日期</th>
                <th>手机号</th>
                <th>所在班级</th>
            </tr>
            </thead>
            <tbody>
            <#list pageInfo.records as student >
            <tr align="center">
                <td><input type="checkbox" class="form-check" value="${student.id}"></td>
                <td>${(student_index % pageInfo.size) + 1}</td>
                <td>${student.firstName}</td>
                <td>${student.lastName}</td>
                <!--<td><#if (student.idCard?substring(16,17)?number) % 2 == 1>精神小伙儿<#else>扒蒜老妹儿</#if></td>-->
                <td><#if student.gender == 1>精神小伙儿<#else>扒蒜老妹儿</#if></td>
                <td>${student.age}</td>
                <td>${student.birthday?string("yyyy-MM-dd")}</td>
                <!--<td>${((student.idCard?substring(6,14))?date("yyyyMMdd"))}</td>-->
                <td>${student.mobile}</td>
                <td>${student.clazz.name}</td>

            </tr>
            </#list>
            </tbody>
        </table>
        <!-- 分页导航 -->
        <div id="pagination" align="center" style="padding:20px 0px 20px 0px"></div>
    </div>
    <div class="layui-footer" style="text-align:center">
        <!-- 底部固定区域 -->
        © ekgc.cn - 课工场 - 每时每课给你薪机会
    </div>
</div>
<!-- 填写员工详细信息 -->
<div style="display: none;" id="add">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend><span id="add_title"></span></legend>
    </fieldset>
    <form class="layui-form" action="" lay-filter="add">
        <div class="layui-form-item">
            <label class="layui-form-label">班级</label>
            <div class="layui-input-inline">
                <select name="cid" id="cid"></select>
            </div>
            <label class="layui-form-label">身份证</label>
            <div class="layui-input-inline">
                <input type="text" name="idCard" value="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">曾用名</label>
            <div class="layui-input-inline">
                <input type="text" name="firstName" id="firstName" value="" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">现用名</label>
            <div class="layui-input-inline">
                <input type="text" name="lastName" id="lastName" value="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="authText" value="" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" name="repassword" value="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="tel" name="mobile" value="" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <!-- <button class="layui-btn layui-btn-disabled" lay-submit lay-filter="formAdd" id="formAdd" disabled>立即提交</button> -->
                <button class="layui-btn" lay-submit lay-filter="formAdd" id="formAdd">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 显示员工详细信息 -->
<div style="display: none;" id="info">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend><span id="add_title"></span></legend>
    </fieldset>
    <form class="layui-form" action="" lay-filter="info">
        <div class="layui-form-item">
            <label class="layui-form-label">班级</label>
            <div class="layui-input-inline">
                <input type="text" name="clazzName" value="" readonly autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">身份证</label>
            <div class="layui-input-inline">
                <input type="text" name="idCard" value="" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">曾用名</label>
            <div class="layui-input-inline">
                <input type="text" name="firstName" value="" readonly autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">现用名</label>
            <div class="layui-input-inline">
                <input type="text" name="lastName" value="" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
                <input type="text" name="age" value="" readonly autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="close" lay-skin="switch" lay-text="男|女" disabled="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="mobile" value="" readonly autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-inline">
                <input type="text" name="birthday" value="" readonly autocomplete="off" class="layui-input">
            </div>

        </div>
    </form>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="echarts_box" class="layui-row" style="display: none;">
    <div id="gender_box" class="layui-col-xs6" style="height:400px;">

    </div>
    <div id="computer_box" class="layui-col-xs6" style="height:400px;">

    </div>
</div>
<!--<img src="http://localhost:8080/qrcode/bilibili" width="900px" height="900px" style="display: none;" id="qrcode" alt="">-->

</body>

</html>
<!-- <script src="res/jquery-3.5.1.min.js"></script> -->

<!-- 引入 echarts.js -->
<script src="res/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="res/commons.js"></script> -->
<!--<script src="js/data.js"></script>-->
<script>
    var idCardUitl = {
        getBirthday: function(idCard) {
            return idCard.substring(6, 10) + '-' + idCard.substring(10, 12) + '-' + idCard.substring(12, 14);
        },
        getAge: function(idCard) {
            let date = new Date();
            let age = date.getFullYear() - idCard.substring(6, 10) - 1;
            let month = date.getMonth() + 1;
            if (idCard.substring(10, 12) < month || idCard.substring(10, 12) == month && idCard.substring(10, 12) <= date.getDate()) {
                age++;
            }
            return age;
        },
        getGender: function(idCard) {
            return idCard.substr(16, 1) % 2 == 1 ? 1 : 0;
        },
    };
    layui.use(['element', 'form', 'laypage', 'layer', 'jquery'], function () {
        var element = layui.element,
            laypage = layui.laypage,
            form = layui.form,
            jquery = layui.jquery;
        layer = layui.layer;


        /*分页符*/
        laypage.render({
            elem: 'pagination', //页码显示位置
            theme: '#1E9FFF', // 主题
            count: ${pageInfo.total},  //总条数
            limit: ${pageInfo.size},  //每页条数
            curr: ${pageInfo.current},    //当前页
            layout: ['first', 'prev', 'page', 'next', 'last', 'skip', 'limit', 'count', 'refresh'],
            page: {
                first: '首页',
                prev: '上一页',
                next: '下一页',
                last: '末页'
            },
            first: '首页',
            last: '尾页',
            groups: '5',
            limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 100],
            jump: function (obj, first) {   //跳转(obj-页面参数，first-是否第一次调用)
                window.console.log(obj);
                if (!first) {
                    location.href = '/data?cid=${cid}&page=' + obj.curr + '&limit=' + obj.limit;
                }
            }
        });
        // 分页定位
        let x = (jquery('#pagination').parent().width() - jquery('#pagination').width()) / 2 + jquery('#deptlist').width();
        jquery('#pagination').css({"position": "fixed", "left": x});
        // 重新渲染表单
        form.render("select");

        // 触发添加按钮
        jquery('#addBtn').on('click',function (e) {
            jquery.get('/clazz/queryclazz', {}, function(clazzResponstText){
                layer.open({
                    type: 1,
                    content: jquery('#add'),
                    title: '添加人员',
                    area: ['660px', '380px'],
                    closeBtn: 2,
                    shadeClose: true,
                    success: function(layero, index) {
                        // 新增人员渲染部门下拉列表
                        jquery('#cid').empty();
                        jquery.each(clazzResponstText.data, function(indexInArray, valueOfElement) {
                            // 创建Option对象并赋值
                            let option = new Option(valueOfElement.name, valueOfElement.id);
                            // 向Option对象增加属性值
                            // option.setAttribute('selected', 'selected');
                            // 向页面输出
                            jquery('#cid').append(option);
                        });
                        //表单赋值
                        form.val('add', {
                            "firstName": '',
                            "lastName": '',
                            "idCard": '',
                            "authText": '123456',
                            "repassword": '123456',
                            "mobile": '',
                        });
                        // 重新渲染表单
                        form.render("select");
                        form.on('submit(formAdd)', function(data) {
                            // 按钮禁用
                            jquery('#formAdd').addClass("layui-btn-disabled").attr("disabled", true);
                            deptId = data.field.cid;
                            if (deptId != 0) {
                                jquery.ajax({
                                    type: "put",
                                    url: "/student/add",
                                    data: data.field,
                                    dataType: "json",
                                    // 发送cookie
                                    // xhrFields: {
                                    //     withCredentials: true
                                    // },
                                    // 支持ajax跨域
                                    // crossDomain: true,
                                    // 请求发送前
                                    beforeSend: function() {
                                        // 发送请求前，可以对data、url等处理
                                        layer.msg('正在提交，请稍后...', {
                                            icon: 16,
                                            shade: 0.01
                                        });
                                    },
                                    // 请求返回
                                    complete: function() {
                                        // 返回数据，根据数据调转页面等
                                    },
                                    success: function(response) {
                                        switch (response.code) {
                                            case "200":
                                                jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                layer.msg(response.msg, {
                                                    icon: 1
                                                });
                                                setTimeout(() => {
                                                    layer.close(index);
                                                    window.location.replace("/data?cid=" + deptId);
                                                }, 1000);
                                                break;
                                            default:
                                                jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                break;
                                        }
                                    }
                                });
                            }else{
                                layer.msg('请选择班级', {
                                    icon: 5
                                });
                            }
                            return false;
                        });
                    }
                });
            });
        });

        // 触发修改按钮
        jquery('#editBtn').on('click',function (e) {
            let list = new Array();
            jquery('.form-check').each(function (index, element) {
                if (element.checked) {
                    list.push(element.value);
                }
            });
            if (list.length > 0) {
                let id = list[0];
                jquery.get('/student/getStudentById/' + id, {}, function (studentResponstText) {
                    layer.open({
                        type: 1,
                        content: jquery('#add'),
                        title: '详细信息',
                        area: ['660px', '380px'],
                        closeBtn: 2,
                        shadeClose: true,
                        success: function (layero, index) {
                            let student = studentResponstText.data;
                            // 获取部门列表
                            jquery.get('/clazz/queryclazz', {}, function(clazzResponstText){
                                // 新增人员渲染部门下拉列表
                                jquery('#cid').empty();
                                jquery.each(clazzResponstText.data, function(indexInArray, valueOfElement) {
                                    // 创建Option对象并赋值
                                    let option = new Option(valueOfElement.name, valueOfElement.id);
                                    if (valueOfElement.id == student.cid){
                                        // 向Option对象增加属性值
                                        option.setAttribute('selected', 'selected');
                                    }
                                    // 向页面输出
                                    jquery('#cid').append(option);
                                });
                                // 重新渲染表单
                                form.render("select");
                            });
                            //表单赋值
                            form.val('add', {
                                "firstName": student.firstName,
                                "lastName": student.lastName,
                                "idCard": student.idCard,
                                "mobile": student.mobile,
                                "authText": student.authText,
                                "repassword": student.authText,
                            });

                            form.on('submit(formAdd)', function (data) {
                                // 按钮禁用
                                jquery('#formAdd').addClass("layui-btn-disabled").attr("disabled", true);
                                deptId = data.field.cid;
                                if (deptId != 0) {
                                    let updateData = data.field;
                                    updateData.id = id;
                                    jquery.ajax({
                                        type: "put",
                                        url: "/student/update",
                                        data: updateData,
                                        dataType: "json",
                                        // 发送cookie
                                        // xhrFields: {
                                        //     withCredentials: true
                                        // },
                                        // 支持ajax跨域
                                        // crossDomain: true,
                                        // 请求发送前
                                        beforeSend: function () {
                                            // 发送请求前，可以对data、url等处理
                                            layer.msg('正在提交，请稍后...', {
                                                icon: 16,
                                                shade: 0.01
                                            });
                                        },
                                        // 请求返回
                                        complete: function () {
                                            // 返回数据，根据数据调转页面等
                                        },
                                        success: function (response) {
                                            switch (response.code) {
                                                case "200":
                                                    jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                    layer.msg(response.msg, {
                                                        icon: 1
                                                    });
                                                    setTimeout(() => {
                                                        layer.close(index);
                                                        window.location.replace("/data?cid=" + deptId);
                                                    }, 1000);
                                                    break;
                                                default:
                                                    jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                    break;
                                            }
                                        }
                                    });
                                } else {
                                    layer.msg('请选择班级', {
                                        icon: 5
                                    });
                                }
                                return false;
                            });
                        }
                    });
                });
            }else {
                layer.msg('请选择要删除的员工', {icon: 2});
            }
        });

        // 触发删除按钮
        jquery('#delBtn').on('click',function (e) {
            let list = new Array();
            jquery('.form-check').each(function (index, element) {
                if (element.checked) {
                    list.push(element.value);
                }
            });
            if (list.length == 0) {
                layer.msg('未选择任何数据');
            } else {
                layer.prompt({
                    formType: 1,
                    title: '请输入密码，确认删除',
                }, function(value, index) {
                    layer.close(index);
                    jquery.ajax({
                        type: "delete",
                        url: "/student/del/",
                        async: false,
                        contentType: 'application/json;charset=utf-8;',
                        data: JSON.stringify(list),
                        dataType: "json",
                        beforeSend: function() {
                            // 发送请求前，可以对data、url等处理
                            layer.msg('正在删除，请稍后...', {
                                icon: 16,
                                shade: 0.01
                            });
                        },
                        success: function(response) {
                            switch (response.code) {
                                case '200':
                                    layer.msg(response.msg, {
                                        icon: 1
                                    });
                                    window.location.reload();
                                    break;

                                default:
                                    layer.msg(response.msg, {
                                        icon: 5
                                    });
                                    break;
                            }
                        }
                    });
                });
            }
        });

        // 触发详情按钮
        jquery('#infoBtn').on('click',function (e) {
            let list = new Array();
            jquery('.form-check').each(function (index, element) {
                if (element.checked) {
                    list.push(element.value);
                }
            });
            if (list.length > 0) {
                jquery.get('/student/getStudentById/' + list[0], {}, function (studentResponstText) {
                    layer.open({
                        type: 1,
                        content: jquery('#info'),
                        title: '详细信息',
                        area: ['660px', '380px'],
                        closeBtn: 2,
                        shadeClose: true,
                        success: function (layero, index) {
                            let student = studentResponstText.data;

                            //表单赋值
                            form.val('info', {
                                "clazzName": student.clazz.name,
                                "idCard": student.idCard,
                                "firstName": student.firstName,
                                "lastName": student.lastName,
                                "age": idCardUitl.getAge(student.idCard),
                                "close": idCardUitl.getGender(student.idCard) == 1 ? true : false,
                                "mobile": student.mobile,
                                "birthday": idCardUitl.getBirthday(student.idCard),
                            });
                            // 重新渲染表单
                            form.render("select");
                            form.on('submit(formAdd)', function (data) {
                                // 按钮禁用
                                jquery('#formAdd').addClass("layui-btn-disabled").attr("disabled", true);
                                deptId = data.field.cid;
                                if (deptId != 0) {
                                    jquery.ajax({
                                        type: "put",
                                        url: "/student/add",
                                        data: data.field,
                                        dataType: "json",
                                        // 发送cookie
                                        // xhrFields: {
                                        //     withCredentials: true
                                        // },
                                        // 支持ajax跨域
                                        // crossDomain: true,
                                        // 请求发送前
                                        beforeSend: function () {
                                            // 发送请求前，可以对data、url等处理
                                            layer.msg('正在提交，请稍后...', {
                                                icon: 16,
                                                shade: 0.01
                                            });
                                        },
                                        // 请求返回
                                        complete: function () {
                                            // 返回数据，根据数据调转页面等
                                        },
                                        success: function (response) {
                                            switch (response.code) {
                                                case "200":
                                                    jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                    layer.msg(response.msg, {
                                                        icon: 1
                                                    });
                                                    setTimeout(() => {
                                                        layer.close(index);
                                                        window.location.replace("/data?cid=" + deptId);
                                                    }, 1000);
                                                    break;
                                                default:
                                                    jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                    break;
                                            }
                                        }
                                    });
                                } else {
                                    layer.msg('请选择班级', {
                                        icon: 5
                                    });
                                }
                                return false;
                            });
                        }
                    });
                });
            }else {
                layer.msg('请选择要查看的员工', {icon: 2});
            }
        });

        // echarts图表
        jquery(('#echartsBtn')).on('click',function (e) {
            layer.open({
                type: 1,
                content: jquery('#echarts_box'),
                title: '详细信息',
                area: ['1280px', '480px'],
                success: function(layero, index) {
                    let list = new Array();
                    jquery('.form-check').each(function (index, element) {
                        if (element.checked) {
                            list.push(element.value);
                        }
                    });
                    let cid = ${cid};
                    // 班级性别百分比
                    percent('/student/queryPercent4Gender/' + cid, 'gender_box');
                    // 所有学生性别百分比
                    percent('/student/queryPercent4Gender/' + 0, 'computer_box');

                },
                closeBtn: 2,
                shadeClose: true,
            });
        });

        // 百分比函数
        function percent(url, el) {
            var myChart = echarts.init(document.getElementById(el));
            /*
                如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，
                因此需要一个 loading 的动画来提示用户数据正在加载。
                ECharts 默认有提供了一个简单的加载动画。
                只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
            */
            myChart.showLoading();

            // 使用刚指定的配置项和数据显示图表。
            //  myChart.setOption(option);
            // 异步加载数据
            jquery.ajax({
                type: "get",
                url: url,
                dataType: "json",
                success: function(response) {
                    // 隐藏数据加载动画效果
                    myChart.hideLoading();
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 10,
                            data: response.genderList
                        },
                        series: [{
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: response.percentList
                        }]
                    });
                }
            });
        }
        // 输入曾用名自动填入现用名
        jquery('#firstName').keyup(function(e) {
            jquery('#lastName').val(jquery.trim(jquery('#firstName').val()));
        });

        jquery('#isAll').change(function (e) {
            if (jquery('#isAll').is(':checked')) {
                jquery('.form-check').each(function (index, element) {
                    if (!element.checked) {
                        element.checked = true;
                    }
                });
            } else {
                jquery('.form-check').each(function (index, element) {
                    if (element.checked) {
                        element.checked = false;
                    }
                });
            }
        });
        jquery('.form-check').click(function (e) {
            e.preventDefault();
        });
        jquery('tr').slice(1).click(function (e) {
            // let checkbox = $("input[type='checkbox']",this)[0];
            let checkbox = jquery("input:checkbox", this)[0];
            if (checkbox.checked) {
                checkbox.checked = false;
            } else {
                checkbox.checked = true;
            }
            check(jquery('.form-check'));
        })

        function check(items) {
            let flag = true;
            jquery(items).each(function (index, element) {
                if (!element.checked) {
                    flag = false;
                }
            });
            let isAll = window.document.querySelector(`#isAll`)
            isAll.checked = flag;
        }

    });
</script>